<template>
  <el-dialog
    title="题目预览"
    :visible.sync="previewVisible"
    width="75%"
    :before-close="close"
  >
    <div class="dialog-body">
      <div class="dialog-body-ov">
        <el-col :span="6">【题型】：{{ isQuestionType(data.questionType) }}</el-col>
        <el-col :span="6">【编号】：{{ data.id }}</el-col>
        <el-col :span="6">【难度】：{{ isDifficulty(data.difficulty) }}</el-col>
        <el-col :span="6">【标签】：{{ data.tags }}</el-col>
        <el-col :span="6">【学科】：{{ data.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ data.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ data.direction }}</el-col>
      </div>
      <hr />
      <div class="dialog-body-ov">
        <div>【题干】：<span class="p" v-html="data.question"></span></div>
        <div class="checked" v-for="item in data.options" :key="item.id">
          <el-radio :value="item.isRight" :label="1">{{ item.title }}</el-radio>
        </div>
      </div>
      <hr />
      <div class="dialog-body-ov">
        <div>
          【参考答案】：<el-button
            @click="videoShow = true"
            type="danger"
            size="small"
            >视频答案预览</el-button
          >
        </div>
        <video
          controls="controls"
          :src="data.videoURL"
          v-if="videoShow"
        ></video>
      </div>
      <hr />
      <div class="txt">
        <span class="txt-left">【答案解析】：</span>
        <span v-html="data.answer"></span>
      </div>
      <hr />
      <div class="txt">
        <span>【题目备注】：{{ data.remarks }} </span>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    previewVisible: {
      type: Boolean,
      required: true
    },
    id: {
      required: true
    }
  },
  data () {
    return {
      questionType,
      difficulty,
      data: {
        questionType: null,
        id: null,
        difficulty: null,
        tags: null,
        subjectName: null,
        directoryName: null,
        direction: null,
        question: null,
        answer: null,
        options: [],
        videoURL: null
      },
      videoShow: false
    }
  },
  watch: {
    id () {
      this.detail(this.id)
    }
  },
  methods: {
    close () {
      this.$emit('update:previewVisible', false)
    },
    async detail (id) {
      const { data } = await detail({ id })
      this.data = data
    },
    isQuestionType (value) {
      return this.questionType.find((i) => +i.value === +value)?.label
    },
    isDifficulty (value) {
      return this.difficulty.find((i) => +i.value === +value)?.label
    }
  }
}
</script>
<style scoped lang="less">
.dialog-body-ov {
  overflow: hidden;
  .el-col-6 {
    padding: 10px 0;
  }
  span.p {
    color: blue;
  }
  .checked {
    padding: 8px 0;
  }
  .el-button--danger {
    width: 104px;
    height: 32px;
  }
  video {
    width: 400px;
    height: 300px;
  }
}
.txt .txt-left {
  float: left;
}
</style>
